<template>
  <div class="book-card">
    <!-- 表格 -->
    <div class="table" width="98%">
      <div class="tr">
        <!-- 时间 -->
        <div class="date">{{create_time}}</div>
        <!-- 分数 -->
        <div class="add-mark">
          <!-- 为了页面样式比较整齐，如果当前分数>0，在前面加一个+号; 当前分数=0在前面加一个空格-->
          <label v-if="record.add > 0">+{{record.add}}</label>
          <label v-else-if="record.add == 0">&nbsp;0</label>
          <label v-else>{{record.add}}</label>
        </div>
        <!-- 最后得分 -->
        <div class="mark">
          <!-- 如果当前分数大于0，在分数前加空格，为了页面样式整齐 -->
          <label v-if="record.mark >= 0">&nbsp;{{record.mark}}</label>
          <label v-else>{{record.mark}}</label>
        </div>
        <!-- 备注 -->
        <div class="note" @click="changeShow">
          <label v-if="note">{{note}}</label>
          <label class="no-note" v-else>点击添加</label>
        </div>
        <!-- 编辑或取消按钮 -->
        <!-- 两种状态：取消（esllipsis：省略），编辑（有文字） -->
        <label v-if="show_input">
          <div class="image" @click="cancel">
            <img src="/static/images/quxiao.png">
          </div>
        </label>
        <label v-else>
          <div class="image" @click="changeShow">
            <img :src="note ? src : ''">
          </div>
        </label>
      </div>
    </div>

    <!-- 点击添加或编辑按钮显示文本框 -->
    <div class="hide" v-if="show_input">
      <button class="btn" @click="addNote">
        <label v-if="record.note">修改</label>
        <label v-else>添加</label>
      </button>
      <input class="input"
            placeholder="最多输入10个字"
            max-length='10'
            v-model="note"
      >
    </div>
  </div>
</template>

<script>
import { formatTime } from '../utils/index'
import { post, showModal} from '@/util'

export default {
  data () {
    return {
      create_time: formatTime(new Date(this.record.create_time)),
      show_input: false,
      note: this.record.note,
      src: '/static/images/bianji.png'
    }
  },
  props: ['record'],
  methods: {
    changeShow () {
      this.show_input = !this.show_input
    },
    cancel () {
      this.show_input = !this.show_input
      this.note = this.record.note
    },
    async addNote () {
      const data = {
        id: this.record.id,
        note: this.note
      }

      try {
        const res = await post('/weapp/updatenote', data)
        console.log('从后端返回的执行正确的信息：', res)
        this.show_input = false
        this.record.note = this.note
      } catch (err) {
        showModal('失败', '请重新提交')
        console.log('从后端返回的执行错误的信息：', err)
      }
    }
  }
}
</script>

<style lang='scss'>
.book-card {
  background: #fff;
  margin-bottom: 6px;
  
  .table {
    border: 0px solid darkgray;
    font-size: 15px;
    height: 42px;
    line-height: 42px;

    .tr {
      display: flex;
      width: 100%;

      .date {
        width: 40%;
        margin-left: 10px;
      }
      .add-mark {
        width: 10%;
        font-weight: 10%;
      }
      .mark {
        width: 15%;
        margin-left: 20px;
        font-weight: bold;
      }
      .note {
        width: 16%;
        text-align: center;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;

        .no-note {
          text-decoration: underline;
          color: #C0C0C0;
          font-size: 13px;
        }
      }
      .image {
        padding-top: 1px;
        float: left;
        margin-left: 5px;
        
        img {
          width: 13px;
          height: 13px;
          margin-right: 5px;
        }
      }
    }
  }

  .hide {
    background: #F0F0F0;
    font-size: 15PX;
    padding: 10px 10px 3px 30px;
    
    .input {
      width: 60%;
      height: 30px;
      background: #FFF;
      border: 1px solid black;
      text-align: center;
    }

    .btn {
      color: white;
      background: #EA5A49;
      padding-left: 15px;
      margin-right: 20px;
      border-radius: 5px;
      font-size: 13px;
      height: 30px;
      line-height: 30px;
      width: 18%;
      float: right;
    }
  }
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>